<template>
  <div class="addressContainer">
    <div class="addressCard" v-if="list.length > 0">
      <div class="cardItem" v-for="(item, index) in list" :key="index">
        <div class="center layout-box aitems">
          <div class="box-col">
            <div class="h1">{{item.userName}}<span>{{item.phone}}</span></div>
            <div class="h2 clamp2">
              {{item.location}}
            </div>
          </div>
          <div @click="onRouterPages('1',item)"><van-icon size="18" :name="iconEdit" /></div>
        </div>
        <div class="bottom layout-box">
          <div class="box-col" @click="selectAddress(item)">
            <van-icon size="16" :name="item.defaultAddress==true?radioHover:radio" />{{sizeFont}}
            <!--<van-checkbox @click="checkSelect(item)" icon-size="16px" checked-color="#DB1919" :name="item.defaultAddress" :disabled="item.defaultAddress!=true?true:false" v-model="item.defaultAddress">默认地址</van-checkbox>-->
            </div>
          <div @click="delEidt(item.addressId)">删除</div>
        </div>
      </div>
    </div>
    <!--<div v-else class="notData">暂无收货地址</div>-->
    <div class="BFiexdLayout">
      <van-button
        @click="onAdd"
        type="primary"
        size="28"
        color="#DB1919"
        block
        >+添加收货地址</van-button
      >
    </div>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';
import { setToken } from "@/utils/auth";
import $api from "@/api/index";
export default {
  // import引入的组件需要注入到对象中才能使用
  name: "addressList",
  components: {},
  data() {
    // 这里存放数据
    return {
      radio: require("@/assets/icon/radio.png"),
      radioHover: require("@/assets/icon/radio_hover.png"),
      iconEdit: require("@/assets/icon/icon-edit.png"),
      chosenAddressId:0,
      list: [],
      sizeFont:'默认地址',
      allow:false
    };
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    onRouter(){
      const currRouter = this.$route.query
      console.log(currRouter)
      if(currRouter.orderType == '1'){
        console.log('选择')
        this.allow = true
        this.sizeFont = '选择地址'
      }else{
        this.allow = false
        this.sizeFont = '默认地址'
      }
    },
    selectAddress(item){
      if(this.allow){
        localStorage.setItem('CURR_ADDRESS', JSON.stringify(item))
        this.$router.go(-1)
      }
    },
    getListAddress(){
      let params = {}
      $api.shopApi.listAddress(params).then((res)=>{
        console.log(res)
        if(res.status == 10000){
          this.list = res.data
        }
      })
    },
    checkSelect(item){
      console.log(item)
      return
      let params = {
        addressId:item.addressId,
        defaultAddress:item.defaultAddress
      }
      $api.shopApi.editAddress(params).then((res)=>{
        console.log(res)
          let list = this.list
          list.forEach(e=>{
            e.defaultAddress = false
          })

        if(res.status == 10000){
          this.$toast("修改成功");
          //this.getListAddress()
        }
      })
    },
    onAdd() {
      this.$router.push({path:"/addressEdit"})
    },
    delEidt(id) {
      this.$dialog.confirm({
        title: '温馨提示',
        message: '确定删除',
      })
      .then(() => {
        // on confirm
        let params = {
          id:id,
        }
        $api.shopApi.delAddress(params).then((res)=>{
          if(res.status == 10000){
            this.$toast("删除成功");
            this.getListAddress()
          }
        })
      })
      .catch(() => {
        // on cancel
      });
    },
    onRouterPages(type,item){
      this.$router.push({path:"/addressEdit",query:{type:type,addressId:item.addressId}})
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.getListAddress()
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.onRouter()
  },
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {}, // 如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='scss' scoped>
// @import url(); 引入公共css类
.addressContainer {
  background: #f2f5f4;
  padding: 0 24px;
  height: calc(100vh - 160px);
  overflow-x: auto;
  .BFiexdLayout{
    background: #f2f5f4;
  }
}
.addressCard {
  padding-top: 24px;
  color: #333333;
  .cardItem {
    max-height: 318px;
    background: #ffffff;
    border-radius: 12px;
    margin-bottom: 24px;
    .center {
      padding: 32px;
      overflow: hidden;
      .h1 {
        line-height: 50px;
        font-size: 36px;
        padding-bottom: 10px;
        span {
          font-size: 28px;
          color: #666666;
          padding-left: 16px;
        }
      }
      .h2 {
        font-size: 28px;
        line-height: 40px;
      }
    }
    .bottom {
      overflow: hidden;
      padding: 32px;
      font-size: 24px;
      color: #666666;
      height: 34px;
      line-height: 34px;
      border-top: 2px solid #f7f7f7;
      .van-icon{
        vertical-align: middle;
        margin-right: 10px;
      }
    }
  }
}
</style>
